<template>
  <div>
    <el-form size="small" :model="searchForm" label-width="140px">
      <el-row>
        <el-col :span="4" style="min-width: 300px">
          <el-form-item label="权限名称：">
            <el-input
              placeholder="请输入权限名称"
              clearable
              v-model="searchForm.username"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4" style="min-width: 300px">
          <el-button
            type="primary"
            size="mini"
            @click="select"
            style="margin-left: 15px"
            >查询
          </el-button>
          <el-button type="primary" size="mini" @click="add">添加</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      size="small"
      stripe
      :header-cell-style="tableHeaderCellStyle"
      style="margin-top: 15px"
    >
      <el-table-column label="序号" width="80" align="center">
        <template slot-scope="scope">
          <label>{{ scope.$index + 1 + pageSize * (currentPage - 1) }}</label>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="权限标识" align="center" />
      <el-table-column prop="name" label="权限名称" align="center" />
      <el-table-column
        prop="type"
        label="最上级权限"
        :formatter="formatterType"
        align="center"
      />
      <el-table-column prop="permission" label="权限名词" align="center" />
      <el-table-column label="操作" width="350" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="check(scope.$index, scope.row)"
            >查看</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="update(scope.$index, scope.row)"
            >编辑
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="remove(scope.$index, scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="currentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="amount"
      style="float: right"
    />
    <el-dialog
      :title="detailDialogTitle"
      :visible.sync="detailDialogFormVisible"
      custom-class="dialog"
      :before-close="beforeHiddenDetailDialogFunc"
      center
      width="600px"
    >
      <detail
        ref="detailDialog"
        :form-data="permissionData"
        :operate="operate"
        @hiddenDetailDialog="hiddenDetailDialogFunc"
      />
    </el-dialog>
  </div>
</template>

<script>
import Detail from "./Detail";
import {
  getPermissionListPagingByCondition,
  deleteUser
} from "../../axios/api";

export default {
  data() {
    return {
      searchForm: {},
      typeArray: [
        { label: "是", value: 1 },
        { label: "否", value: 2 }
      ],
      tableData: [],
      pageSize: 10,
      amount: 0,
      currentPage: 1,
      tableHeaderCellStyle: {
        highlightCurrentRow: true
      },
      detailDialogTitle: "",
      detailDialogFormVisible: false,
      permissionData: {},
      operate: 0
    };
  },
  methods: {
    getData() {
      this.select();
    },
    getPermissionListAll() {},
    select() {
      let params = {
        page: this.currentPage,
        pageSize: this.pageSize,
        name: this.searchForm.name || ""
      };
      getPermissionListPagingByCondition(
        params,
        data => {
          this.tableData = data.list;
          this.amount = data.amount;
        },
        () => {
          this.tableData = [];
          this.amount = 0;
        }
      );
    },
    formatterType(row, column, cellValue) {
      let value = this.typeArray.filter(item => {
        return item.value === cellValue;
      })[0];
      if (value) return value.label;
      else return "否";
    },
    currentChange(val) {
      this.currentPage = val;
      this.select();
    },
    add() {
      this.detailDialogTitle = "新增用户信息";
      this.detailDialogFormVisible = true;
      this.permissionData = {};
      this.operate = 0;
    },
    check(index, row) {
      this.detailDialogTitle = "查看用户信息";
      this.detailDialogFormVisible = true;
      this.permissionData = JSON.parse(JSON.stringify(row));
      this.operate = 2;
    },
    update(index, row) {
      this.detailDialogTitle = "编辑用户信息";
      this.detailDialogFormVisible = true;
      this.permissionData = JSON.parse(JSON.stringify(row));
      this.operate = 1;
    },
    remove(index, row) {
      this.$confirm("数据删除后将无法恢复，是否确认删除？", "提示", {}).then(
        () => {
          let params = { id: row.id };
          deleteUser(params, () => {
            if (this.tableData.length === 1 && this.currentPage > 1) {
              this.currentPage -= 1;
            }
            this.select();
          });
        },
        () => {}
      );
    },
    beforeHiddenDetailDialogFunc(done) {
      this.$refs["detailDialog"].clearValidate();
      done();
    },
    hiddenDetailDialogFunc() {
      this.$refs["detailDialog"].clearValidate();
      this.detailDialogFormVisible = false;
      this.select();
    }
  },
  mounted() {
    this.getData();
  },
  components: {
    Detail
  }
};
</script>
